<!-- components/FullscreenSwiper.vue -->
<template>
	<view v-if="show" class="fullscreen-mask" @touchstart="handleInteraction">
		<swiper class="swiper" :autoplay="true" :circular="true" :interval="3000" @change="onSwiperChange">
			<swiper-item v-for="(img, index) in swiperImages" :key="index">
				<image @load="" :src="img.imageUrl" mode="aspectFill" class="image" @touchstart.stop="handleInteraction" />
			</swiper-item>
		</swiper>
	</view>
	<up-modal v-model:show="passwordModal" @cancel="cancel" :show-confirm-button="false" title="解除轮播图密码" width="660px">
		<!-- @cancel="cancel" -->
		<view style="width: 100%; padding: 20px 80px 0; display: flex; flex-direction: column; gap: 50px">
			<up-input
				:customStyle="{ height: '54px', textAlign: 'center' }"
				fontSize="20px"
				placeholder="请输入密码"
				border="surround"
				type="password"
				v-model="password"
			></up-input>
			<view style="padding-bottom: 30px; box-sizing: border-box; display: flex; width: 100%; gap: 24px; justify-content: space-between">
				<view
					@click="cancel"
					style="
						margin-right: 15px;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 50%;
						height: 48px;
						background: #e1e1e1;
						border-radius: 8px 8px 8px 8px;
					"
				>
					<text style="font-weight: 600; font-size: 20px; color: #6b6b6b">取消</text>
				</view>
				<view
					@click="confirmPassword"
					style="display: flex; justify-content: center; align-items: center; width: 50%; height: 48px; background: #0052d9; border-radius: 8px 8px 8px 8px"
					:style="{ pointerEvents: password == '' ? 'none' : 'auto', background: password == '' ? '#cbdefd' : '#0052d9' }"
				>
					<text style="font-weight: 600; font-size: 20px; color: #fff">确定</text>
				</view>
			</view>
		</view>
		<!-- <img src="http://192.168.2.50:8091/jnjy/big/screen/getQrCode?campusId=1233" alt="二维码"></img> -->
	</up-modal>
	<up-modal v-model:show="errorModal" :show-confirm-button="false" title="密码错误！" @cancel="errorCancel" width="660px">
		<view style="width: 100%; box-sizing: border-box; padding: 30px 0px 0; border-top: 1px solid #e8e8e8">
			<view style="text-align: center; margin-bottom: 30px">
				<text style="font-size: 20px; color: #333333">如果忘记密码，可直接用校区校长工号进入！</text>
			</view>
		</view>
	</up-modal>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { onShow, onHide } from '@dcloudio/uni-app';
import { getCarouselList } from '@/api/getData.js';
const swiperImages = ref([
	// '/static/1.jpg',
	// '/static/2.jpg',
	// '/static/3.jpg'
	// 'http://192.168.2.50:8091/jnjy/big/screen/getQrCode?campusId=1233'
]);

const errorCancel = () => {
	errorModal.value = false;
};
const errorModal = ref(false);
const confirmPassword = () => {
	if (password.value !== '') {
		passwordModal.value = false;
		password.value = '';
		hideSwiper();
	} else {
		passwordModal.value = false;
		errorModal.value = true;
	}
};
const cancel = () => {
	password.value = '';
	passwordModal.value = false;
};
const password = ref('');
const show = ref(false);
let timer = null;
const TIMEOUT = 180 * 1000;

// 显示轮播图
const showSwiper = () => {
	console.log('[Swiper] 30秒无操作，显示轮播图');
	if (swiperImages.value.length > 0) {
		setTimeout(() => {
			show.value = true;
		}, 200);
	}
};
defineExpose({
	showSwiper
});
// 隐藏轮播图并重置
const hideSwiper = () => {
	show.value = false;
	resetTimer();
};

// 重置计时器
const resetTimer = () => {
	if (timer) clearTimeout(timer);
	timer = setTimeout(showSwiper, TIMEOUT);
	getImgList(campusId.value);
	// console.log('[Swiper] 计时器已重置')
};
const passwordModal = ref(false);
// 处理轮播图点击
const handleInteraction = (e) => {
	e?.stopPropagation?.();
	passwordModal.value = true;
	console.log('[Swiper] 用户点击轮播图，关闭');
	// hideSwiper();
};

// 接收全局用户操作事件
const setupGlobalListener = () => {
	const onUserInteract = () => {
		console.log('[Swiper] 捕获用户操作事件，重置计时器');
		if (timer) clearTimeout(timer);
		resetTimer();
	};

	uni.$on('user:interact', onUserInteract);

	onUnmounted(() => {
		uni.$off('user:interact', onUserInteract);
	});
};
const campusId = ref(null);
const getImgList = async (id) => {
	const res = await getCarouselList(id);
	if (res.code == 200) {
		// console.log('轮播图列表', res.data);
		swiperImages.value = res.data;
	}
};
// 初始化
onMounted(() => {
	setupGlobalListener();
	resetTimer(); // 启动首次计时
});
onShow(() => {
	campusId.value = uni.getStorageSync('campusId');
	getImgList(campusId.value);
	resetTimer(); // 启动首次计时

	// console.log('计时onShow')
});
onHide(() => {
	if (timer) clearTimeout(timer);
	// console.log('计时onHide')
});
onUnmounted(() => {
	if (timer) clearTimeout(timer);
});

const onSwiperChange = (e) => {
	// console.log('轮播图索引:', e.detail.current)
};
</script>

<style scoped>
.fullscreen-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.swiper {
	width: 100%;
	height: 100%;
}

.image {
	width: 100%;
	height: 100%;
}
</style>
